<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <el-table
            v-loading="tableLoading"
            :default-expand-all="false"
            row-key="id"
            :data="tableData"
            stripe
            border
            :height="settings.tableHeight()"
        >
          <el-table-column label="用户名配置">
            <template v-slot="scope">
                <el-input type="textarea" rows="20" @blur="handleUpdate(scope.row)" v-model="scope.row.nameConfig"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="头像配置">
            <template v-slot="scope">
              <el-input type="textarea" rows="20"  @blur="handleUpdate(scope.row)" v-model="scope.row.avatarConfig"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div class="kva-pagination-box center">
          <el-pagination
              :current-page="queryParams.pageNo"
              :page-size="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </home-page-header>
    </div>
  </div>
</template>
<script setup>
import settings from '@/settings'
import KVA from '@/utils/kva.js'
import { findPages,saveUpdate } from '@/api/users/registerconfig.js'

// 搜索属性定义
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  status: '',
  keyword: ''
})

// 定义响应式得列表数据容器
const tableData = ref([])
const tableLoading = ref(false)
const searchForm = ref({})

// 编辑添加相关
const addRef = ref({})

// 加载数据
const handleLodeData = async () => {
  tableLoading.value = true
  const resp = await findPages(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
}


// 更新状态
const handleUpdate = async (row) => {
  await saveUpdate(row)
  handleLodeData()
  KVA.notifySuccess('操作成功!')
}


onMounted(() => {
  handleLodeData()
})
</script>
